<template>
  <div>
    <h3>当前最新的 count 值为: {{ $store.state.count }}</h3>
    <button @click="btnhandle1">+1</button>
    <button @click="btnhandle2">+N</button>
    <button @click="btnhandle3">+1 Async</button>
    <button @click="btnhandle4">+N Async</button>

    <h3>{{$store.getters.showNum}}</h3>

  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnhandle1() {
      // commit() 函数就是专门用于触发 mutation 中的函数
      this.$store.commit('add')
    },
    btnhandle2() {
      // 第一个参数就是我们要调用的 mutations 中的函数名
      // 第二个参数就是传递给 addN 函数的参数
      this.$store.commit('addN', 3)
    },
    // count 异步自增加1
    btnhandle3() {
      // dispatch() 函数就是专门用于触发 action
      this.$store.dispatch('addAsync')
    },
    btnhandle4() {
      // 第一个参数就是我们要调用的 action 中的函数名
      // 第二个参数就是传递给 addNAsync 函数的参数
      this.$store.dispatch('addNAsync', 5)
    }
  }
}
</script>

<style scoped>
</style>
